﻿ <style type="text/css">
body
{
    margin:10px;
}
.jqbox_overlay
{
    position:         fixed;
    width:            100%;
    opacity:          50;//เงา
    top:              0px;
    margin:           0px;
    min-height:       200px;
    height:           100%;
    background-color: #000;
}
#jqbox_innerhtml
{
    position:         fixed;
    width:            500px;
    height:           200px;
    margin:           5% auto;
    padding:          10px;
    background-color: #FFF;
    border:           5px solid #CCC;
    z-index:          200;
    box-shadow:       #000 0 2px 18px;
  top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
}
div#DivA,div#DivB{
	display:block;
	position:relative;
	width:50px;
	height:50px;
}
div#DivA{
	position:         fixed;
	background-color:#CC99FF;
	width:            500px;
    height:           200px;
	z-index:          200;
	margin:           5% auto;
	 top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
	display:none;
}
div#DivB{
	background-color:#FFCC33;
}

</style>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$("input#testIT").click(function(){
		//$("div#DivA").animate({left:'300px'},1200).delay(600).animate({left:0},1200);
		//$("div#DivB").animate({left:'300px'},1200).animate({left:0},1200);
		$("#DivA").show("slow").delay(1000).hide("slow");
	});
});
</script>
<!--<div class='jqbox_overlay'></div>
<div id='jqbox_innerhtml'>Popup content</div>-->
<div id="DivA">Div A</div>
<!--<div id="DivB">Div B</div>
<input type="button" name="testIT" id="testIT" value="Test" />-->










<!--
ตรึงขอบล่าง
div#DivA{
	height:50px;
	position:fixed;
	left:0px;
  top:0px;
	
	background-color:#000000;
	width:100%;
	z-index: 99;
}
div#DivA{
	background-color:black left top ;
}
div#DivB{
	background-color:#FFCC33;
}

<div id='DivA'></div>


-->


